<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Raster Smoothing</title>
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        // Draw raster with default smoothing value:
        var defaultRaster = new Raster('pattern');

        // Wait for it to be loaded:
        defaultRaster.onLoad = function () {
            var textOffset = [0, -10];
            // Scale it up so that we can see if pixels are smoothed or not
            defaultRaster.scale(3);
            defaultRaster.position = [ 200, 250 ];
            new PointText({
                point: defaultRaster.bounds.topLeft + textOffset,
                content: 'Default'
            });

            // Make a clone with smoothing set to true.
            var smoothedRaster = defaultRaster.clone();
            smoothedRaster.smoothing = true;
            smoothedRaster.position += [ 0, defaultRaster.bounds.height + 50 ];
            new PointText({
                point: smoothedRaster.bounds.topLeft + textOffset,
                content: 'Smoothed'
            });

            // Make a clone with smoothing set to false.
            var pixelatedRaster = defaultRaster.clone();
            pixelatedRaster.smoothing = false;
            pixelatedRaster.position += [ defaultRaster.bounds.width + 50, 0 ];
            new PointText({
                point: pixelatedRaster.bounds.topLeft + textOffset,
                content: 'Pixelated'
            });
        };

    </script>
</head>
<body>
<canvas id="canvas" resize></canvas>
<img id="pattern" width="512" height="512" style="display: none;" src=""/>
</body>
</html>
